<template>
    <el-container>
        <el-header class="head">
            <el-row>
                <el-col :span="4">
                    <el-link :underline="false" style="height: 60px" @click="router.push('/index')">
                        <el-image class="logo"
                                  src="https://img.gejiba.com/images/91ed8cc18f397ca9e9477a9f76ab3094.png"/>
                    </el-link>
                </el-col>
                <el-col :span="6" :offset="5">
                    <el-input type="text" style="position: relative;top: 13px;width: 20vw; margin-right: 10px"
                              v-model="key" placeholder="输入以查询"
                              @input="search"
                              clearable>
                    </el-input>
                    <el-button class="button">
                        <el-icon>
                            <Position/>
                        </el-icon>
                    </el-button>
                    <div class="search-info" v-show="objData.searchShow">
                        <div class="search-item"
                             v-for="item in searchData.data"
                             @click="clickSearchItem(item.category,item.productid)"
                        >
                            <span style="color:#409EFF;">{{ item.category }}</span>:{{ item.name }}
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" :offset="3">
                    <div style="position: relative;top: 13px" v-if="!objData.islogin">
                        <el-link :underline="false" class="text" @click="router.push('/login')">登录</el-link>
                        <el-link :underline="false" class="text" @click="router.push('/register')">注册</el-link>
                    </div>
                    <div class="userinfo" v-if="objData.islogin">
                        <el-link :underline="false" style="font-size: 20px;margin-right: 10px"
                                 @click="router.push({path:`/account/${objData.loginName}`,query: {type:'first'}})">
                            {{ objData.loginName }}
                        </el-link>
                        <div class="user-button" @mouseenter="shopMouseOver" @mouseleave="shopMouseLeave"
                             @click="router.push({path:`/account/${objData.loginName}`,query: {type:'second'}})">
                            <el-icon :size="20" style="position: relative;left: 3px;">
                                <ShoppingCart/>
                            </el-icon>
                            <span style="font-size: 5px">购物车</span>
                        </div>
                        <div class="user-button" @mouseenter="orderMouseOver" @mouseleave="orderMouseLeave"
                             @click="router.push({path:`/account/${objData.loginName}`,query: {type:'third'}})">
                            <el-icon :size="20" style="position: relative;left: 3px">
                                <Goods/>
                            </el-icon>
                            <span style="font-size: 5px">订单</span>
                        </div>
                        <el-button style="margin-left: 10px" @click="logout" type="danger" plain>退出登录</el-button>
                    </div>
                </el-col>
            </el-row>
            <div class="shop-info" v-show="objData.shopinfo">
                <div>
                    <div v-if="objData.cartshow" class="callback">{{ objData.cartMsg }}</div>
                    <div v-else>
                        <div v-for="item in cartData.data" class="cart-show">
                            <img :src="item.descn" :alt="item.itemId"/>
                            <div>
                                <div style="font-size: 20px;font-weight: bold">{{ item.productName }}</div>
                                <div style="color: #409EFF;font-size:15px ">{{ item.itemId }}</div>
                                <div style="color: #909399">数量:{{ item.num }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-info" v-show="objData.orderinfo">
                <div v-if="objData.ordershow" class="callback">{{ objData.orderMsg }}</div>
                <div v-else>
                    <div v-for="item in orderData.data" class="cart-show">
                        <img :src="item.descn" :alt="item.itemId"/>
                        <div>
                            <div style="font-size: 20px;font-weight: bold">{{ item.productname }}</div>
                            <div style="color: #409EFF;font-size:15px ">{{ item.itemId }}</div>
                            <div style="color: #909399">数量:{{ item.num }}</div>
                            <div>总价:<span style="color:rgb(255, 79, 0);">{{ item.total_cost }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </el-header>
    </el-container>
    <el-container class="main">
        <el-main style="text-align: center;padding: 0">
            <router-view/>
        </el-main>
        <el-footer class="foot">
            <h2>关于我们</h2>
            <el-row class="foot-show">
                <el-col :span="4">
                    <div>
                        <span>小组成员</span>
                        <ul>
                            <li>崔昊森</li>
                            <li>曾崇岳</li>
                            <li>赵 博</li>
                            <li>吴常兴</li>
                            <li>贾荣博</li>
                            <li>刘名帆</li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>
                        <span>使用到的框架</span>
                        <ul>
                            <li>后端:spring boot,mybatis-plus等</li>
                            <li>前端:vue,element-plus等</li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
            <el-divider>gitee:<a href="https://gitee.com/cui-haosen/second-frontend">https://gitee.com/cui-haosen/second-frontend</a>
            </el-divider>
            <el-divider>本项目仅作为课程实验</el-divider>
        </el-footer>
    </el-container>

</template>

<script lang="ts" setup>
import router from "@/router";
import {reactive, onBeforeMount, ref} from "vue";
import {Goods, Position, ShoppingCart} from "@element-plus/icons-vue";
import {get} from '@/assets/ts/ruquestMethod'
import {ElMessageBox, ElMessage} from 'element-plus'
import type {CartData, OrderData, ProductData} from "@/assets/ts/Interfaces";

let objData = reactive({
    islogin: false,
    loginName: '',
    shopinfo: false,
    orderinfo: false,
    cartMsg: '',
    cartshow: true,
    orderMsg: '',
    ordershow: true,
    searchShow: false
})
const cartData = reactive<CartData>({
    data: [{
        username: '',
        descn: '',
        listprice: 0,
        num: 1,
        itemId: '',
        productName: '',
        totalcost: 0,
        productId: ''
    }]
})
const orderData = reactive<OrderData>({
    data: [{
        id: 0,
        username: '',
        descn: '',
        productid: '',
        itemId: '',
        num: 0,
        total_cost: '',
        address: '',
        productname: '',
        isdelivery: 1
    }]
})
const searchData = reactive<ProductData>({
    data: [{
        productid: '',
        category: '',
        name: '',
        descn: '',
        descnn: ''
    }]
})
const key = ref('')
const logout = () => {
    ElMessageBox.confirm(
        '您确定要退出吗',
        '确定退出',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        get('/accounts/logout',
            (data: any) => {
                if (data.status === 1) {
                    ElMessage.success(data.message)
                    sessionStorage.removeItem('loginName')
                    router.go(0)
                }
                if (data.status === 0) {
                    ElMessage.error(data.message)
                }
            }
        )
    })
}
const islogin = () => {
    get('accounts/islogin',
        (response: any) => {
            if (response.status == 1) {
                sessionStorage.setItem('loginName', response.data.userid)
                objData.loginName = response.data.userid
                objData.islogin = true
            } else {
                sessionStorage.removeItem('loginName')
                objData.islogin = false
            }
        })
}
const shopMouseOver = () => {
    get(`/carts/browse/${objData.loginName}`,
        (response: any) => {
            if (response.status == 1) {
                cartData.data = response.data
                objData.cartshow = false
            } else {
                objData.cartMsg = response.message

            }
        }
    )
    objData.shopinfo = true
}
const shopMouseLeave = () => {
    objData.shopinfo = false
}
const orderMouseOver = () => {
    get(`/orders/browse/${objData.loginName}`,
        (response: any) => {
            console.log(response)
            if (response.status == 1) {
                orderData.data = response.data
                objData.ordershow = false
            } else {
                objData.orderMsg = response.message
            }
        }
    )
    objData.orderinfo = true
}
const orderMouseLeave = () => {
    objData.orderinfo = false
}

function search() {
    if (key.value != '') {
        get(`/products/search/${key.value}`,
            (response: any) => {
                objData.searchShow = true
                console.log(response)
                searchData.data = response.data
            }
        )
    } else {
        objData.searchShow = false
    }
}

function clickSearchItem(category: string, product: string) {
    router.push(`/categories/${category}/${product}`)
    objData.searchShow = false
}

onBeforeMount(() => {
    islogin()
})

</script>

<style scoped>
.head {
    background-image: radial-gradient(transparent 1px,#ffffff 1px);
    border-bottom-color: #CDD0D6;
    box-shadow: var(--el-box-shadow-light);
    width: 100%;
    background-size: 4px 4px;
    position: fixed;
    z-index: 10;
    backdrop-filter: saturate(50%) blur(4px);
}

.logo {
    height: 58px;
}

.button {
    position: relative;
    top: 13px;
    width: 34px
}

.button:hover {
    background-color: #409EFF;
    color: white;
    transition: 0.3s;
}

.main {
    width: 100%;
    position: relative;
    top: 62px;
    z-index: 4;
}

.text {
    font-size: 20px;
    margin-right: 5px;
    font-weight: bold;
}

.foot {
    background-color: white;
    border-top: 1px solid #CDD0D6;
    min-height: 320px;
    box-shadow: var(--el-box-shadow-light);
}

.foot-show {
    margin-left: 5%;
}

.userinfo {
    position: relative;
    top: 13px;
    display: flex;
    flex-direction: row;
}

.user-button {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-right: 5px;
    cursor: pointer;
}

.user-button:hover {
    position: relative;
    bottom: 5px;
}

.shop-info {
    background-color: white;
    position: relative;
    left: 73%;
    max-width: 300px;
    min-height: 100px;
    bottom: 7px;
    box-shadow: var(--el-box-shadow-light);
    border-radius: 5%;
}

.order-info {
    background-color: white;
    max-width: 300px;
    min-height: 100px;
    position: relative;
    left: 76%;
    bottom: 7px;
    box-shadow: var(--el-box-shadow-light);
    border-radius: 5%;
}

.cart-show {
    padding: 10px 10px;
    display: flex;
    flex-direction: row;
}

.cart-show > img {
    width: 100px;
}

.callback {
    text-align: center;
    padding: 10px 10px;
}

.search-info {
    border: #CDD0D6 solid 1px;
    width: 20vw;
    background-color: white;
    margin-top: 15px;
    border-radius: 5px;
}

.search-item {
    border-radius: 2px;
    margin: 5px 5px;
    height: 22px;
    line-height: 20px;
    cursor: pointer;
}

.search-item:hover {
    background-color: #CDD0D6;
    transition: 0.5s;
}
</style>